<template>
  <el-dialog v-model="visible" :title="dialogTitle" @close="close" :width="dynamicWidth" :close-on-click-modal="false">
    <el-form :model ref="modelRef" :rules label-width="80px" class="crud-action-form" :labelPosition>
      <el-row :gutter="16">
        <el-col :span="12" :xs="24" v-if="!isUpdate">
          <el-form-item label="用户账号" prop="username">
            <el-input v-model.trim="model.username" placeholder="请输入用户账号"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24" v-if="!isUpdate">
          <el-form-item label="用户密码" prop="password">
            <el-input v-model.trim="model.password" placeholder="请输入用户密码" type="password" show-password></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model.trim="model.realname" placeholder="请输入用户真实姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model.trim="model.nickname" placeholder="请输入用户昵称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="用户性别" prop="gender">
            <el-select v-model="model.gender">
              <el-option label="未知" :value="0" />
              <el-option label="男性" :value="1" />
              <el-option label="女性" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="用户状态" prop="status">
            <el-select v-model="model.status">
              <el-option label="停用" :value="0" />
              <el-option label="启用" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="用户年龄" prop="age">
            <el-input v-model.number="model.age" placeholder="请输用户年龄"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="model.phone" placeholder="请输入用户手机号码"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xs="24">
          <el-form-item label="QQ号码" prop="qq">
            <el-input v-model.trim="model.qq" placeholder="请输入用户QQ号码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24">
        <el-form-item label="用户角色" prop="roleIds">
          <el-select v-model="model.roleIds" placeholder="请选择用户角色" multiple collapse-tags>
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>

      <div class="flex-center">
        <ep-button type="info" @click="close" svg-icon="Close">取消</ep-button>
        <ep-button type="primary" @click="submit" svg-icon="Save">确认</ep-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({ name: 'UserActionDialog' })
import { TipModal } from '@/utils'
import { UserRequest } from '@/api/system/user.request'
import { RoleRequest } from '@/api/system/role.request'
import type { FormInstance, FormRules } from 'element-plus'

const emits = defineEmits(['getList'])

const appStore = useAppStore()
const roleList = ref<RoleType.Entity[]>([])
const visible = ref<boolean>(false)
const model = ref({} as UserType.Entity)
const modelRef = ref<FormInstance>()
const isUpdate = computed(() => Reflect.has(model.value, 'id'))
const labelPosition = computed(() => (appStore.isDesktop ? 'left' : 'top'))
const dialogTitle = computed(() => (isUpdate.value ? '更新用户' : '添加用户'))
const dynamicWidth = computed(() => (useAppStore().isDesktop ? `600px` : `calc(100% - 32px)`))
const submitSuccessMessage = computed(() => (isUpdate.value ? `数据修改成功` : `数据添加成功`))
const rules: FormRules<UserType.Entity> = {
  username: [{ required: true, message: '用户账号不可为空', trigger: 'blur' }],
  password: [{ required: true, message: '用户密码不可为空', trigger: 'blur' }],
  realname: [{ required: true, message: '真实姓名不可为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '用户昵称不可为空', trigger: 'blur' }],
  // roleIds: [{ required: true, message: '用户角色不可为空', trigger: 'change' }],
  age: [{ required: true, message: '用户年龄不可为空', trigger: 'blur' }],
  phone: [{ required: true, message: '手机号码不可为空', trigger: 'blur' }],
  gender: [{ required: true, message: '用户性别不可为空', trigger: 'blur' }],
  status: [{ required: true, message: '用户状态不可为空', trigger: 'blur' }],
}

/** 弹窗打开的回调 */
async function open(userId?: string) {
  model.value.password = '123456'
  model.value.status = 1
  model.value.gender = 0
  model.value.age = 18
  if (userId) model.value = await UserRequest.findOneById({ userId })
  roleList.value = await RoleRequest.findAll()
  visible.value = true
}

/** 弹窗关闭的回调 */
function close() {
  modelRef.value?.resetFields()
  model.value = {} as UserType.Entity
  visible.value = false
}

/** 提交表单数据 */
async function submit() {
  try {
    await modelRef.value?.validate()
    isUpdate.value ? await UserRequest.update(model.value) : await UserRequest.create(model.value)
    TipModal.msgSuccess(submitSuccessMessage.value)
    emits('getList')
    close()
  } catch (error) {}
}

defineExpose({ open })
</script>

<style lang="scss" scoped></style>
